<template>
	<view class="container">
		<view class="promotion-content">
			<view class="qrcode-wrapper">
				<image class="qrcode-image" :src="qrCodeUrl || '/static/default-qrcode.png'"></image>
				<text class="qrcode-tip">扫描二维码，成为我的会员</text>
				<text class="promotion-code">邀请码：{{promotionCode}}</text>
			</view>
			
			<view class="stat-section">
				<view class="stat-title">
					<text>推广统计</text>
				</view>
				<view class="stat-grid">
					<view class="stat-item">
						<text class="stat-number">{{stats.totalMembers || 0}}</text>
						<text class="stat-label">累计会员</text>
					</view>
					<view class="stat-item">
						<text class="stat-number">{{stats.monthMembers || 0}}</text>
						<text class="stat-label">本月新增</text>
					</view>
					<view class="stat-item">
						<text class="stat-number">{{stats.totalEarnings || 0}}</text>
						<text class="stat-label">累计收益</text>
					</view>
				</view>
			</view>
			
			<view class="action-buttons">
				<button class="action-btn save-btn" @click="saveQrCode">保存二维码</button>
				<button class="action-btn share-btn" @click="shareQrCode">分享给好友</button>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../../../api/api.js';
	
	export default {
		data() {
			return {
				qrCodeUrl: '',
				promotionCode: '',
				stats: {
					totalMembers: 0,
					monthMembers: 0,
					totalEarnings: 0
				}
			}
		},
		onLoad() {
			this.getPromotionInfo();
		},
		methods: {
			async getPromotionInfo() {
				try {
					uni.showLoading({
						title: '加载中...'
					});
					
					const res = await api.user.getPromotionInfo();
					if (res.code === 200 && res.data) {
						this.qrCodeUrl = res.data.qrCodeUrl || '';
						this.promotionCode = res.data.promotionCode || '';
						this.stats = {
							totalMembers: res.data.totalMembers || 0,
							monthMembers: res.data.monthMembers || 0,
							totalEarnings: res.data.totalEarnings || 0
						};
					}
				} catch (err) {
					console.error('获取推广信息失败', err);
					uni.showToast({
						title: '获取推广信息失败',
						icon: 'none'
					});
				} finally {
					uni.hideLoading();
				}
			},
			saveQrCode() {
				if (!this.qrCodeUrl) {
					uni.showToast({
						title: '二维码不存在',
						icon: 'none'
					});
					return;
				}
				
				uni.showLoading({
					title: '保存中...'
				});
				
				uni.downloadFile({
					url: this.qrCodeUrl,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: () => {
									uni.showToast({
										title: '保存成功',
										icon: 'success'
									});
								},
								fail: (err) => {
									console.error('保存图片失败', err);
									uni.showToast({
										title: '保存失败',
										icon: 'none'
									});
								}
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '下载二维码失败',
							icon: 'none'
						});
					},
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			shareQrCode() {
				uni.showShareMenu({
					withShareTicket: true,
					menus: ['shareAppMessage', 'shareTimeline']
				});
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding: 30rpx;
		box-sizing: border-box;
	}
	
	.promotion-content {
		background-color: #FFFFFF;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 20rpx rgba(255, 0, 0, 0.1);
		padding: 40rpx;
		margin-bottom: 30rpx;
	}
	
	.qrcode-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 40rpx;
		border-bottom: 1px solid #f0f0f0;
	}
	
	.qrcode-image {
		width: 400rpx;
		height: 400rpx;
		background-color: #f9f9f9;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
	}
	
	.qrcode-tip {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 10rpx;
	}
	
	.promotion-code {
		font-size: 32rpx;
		font-weight: bold;
		color: #FF0000;
		margin-top: 10rpx;
	}
	
	.stat-section {
		padding: 30rpx 0;
	}
	
	.stat-title {
		margin-bottom: 20rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.stat-grid {
		display: flex;
		justify-content: space-between;
	}
	
	.stat-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	
	.stat-number {
		font-size: 40rpx;
		font-weight: bold;
		color: #FF0000;
		margin-bottom: 10rpx;
	}
	
	.stat-label {
		font-size: 26rpx;
		color: #666;
	}
	
	.action-buttons {
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
	}
	
	.action-btn {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 40rpx;
		font-size: 28rpx;
		margin: 0 20rpx;
	}
	
	.save-btn {
		background-color: #FFFFFF;
		color: #FF0000;
		border: 1px solid #FF0000;
	}
	
	.share-btn {
		background-color: #FF0000;
		color: #FFFFFF;
	}
</style> 